<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>路况热力图</title>
  <style>
    html,
    body,
    #container {
      margin: 0;
      padding: 0;
      width: 100%;
      height: 100%;
    }
    /* 去掉地图logo */

    .BMap_cpyCtrl {
      display: none;
    }

    .anchorBL {
      display: none;
    }

    .amap-logo img {
      display: none;
    }

    .amap-copyright {
      opacity: 0;
    }
  </style>
</head>

<body>
<div id="container" class="container"></div>
<script src="//webapi.amap.com/maps?v=1.4.15&key=53b4e246765e8898dc8ecfa7f7a543e5&"></script>
<script src="//webapi.amap.com/loca?v=1.3.2&key=53b4e246765e8898dc8ecfa7f7a543e5"></script>
<script src="//a.amap.com/Loca/static/dist/jquery.min.js"></script>
<script>
  var map = new AMap.Map('container', {
    features: ['bg', 'road'],
    mapStyle: 'amap://styles/5139139e5ab0d8b85dadd01a17919998',
    center: [113.792531, 36.308382],
    // pitch: 56,
    zoom: 13,
    viewMode: '3D'
  });

  var layer = new Loca.HeatmapLayer({
    map: map,
  });

  $.get('Demo07.json', function(datas) {
    layer.setData(datas, {
      lnglat: function(data) {
        return [data.value.lng, data.value.lat]
      },
      value: 'queue_len'
    });

    layer.setOptions({
      style: {
        radius: 18,
        color: {
          0.5: '#2c7bb6',
          0.65: '#abd9e9',
          0.7: '#ffffbf',
          0.9: '#fde468',
          1.0: '#d7191c'
        }
      }
    }).render();
  });
</script>
</body>

</html>